<template>
  <div class="estimation-container">

    <div class="estimation-form">
      <h2 class="form-title">
        <span class="icon">
          <img src="@/assets/images/icons/icon_estimation.png" alt="">
        </span>
        <div class="text">{{ $t('estimation.shippingEstimate') }}</div>
      </h2>

      <div class="form-grid">
        <div class="form-group country-select">
          <label class="form-label required">{{ $t('estimation.warehouseTo', { appName: appName }) }}</label>
          <Poptip v-model="countryVisible" width="890" trigger="click" placement="bottom-start">
            <div slot="content">
              <Tabs class="country-tab" size="small">
                <TabPane v-for="(item, key) in countryInfo" :label="key" :key="key" :name="key">
                  <div class="country-grid">
                    <div v-for="itemInfo in item" :key="itemInfo.countryCode" class="country-option"
                      @click="onSelectCountry(itemInfo)">
                      <img class="country-flag" :src="itemInfo.flagUrl" alt="">
                      <div class="country-names">
                        <div class="name-cn">{{ itemInfo.countryNameCn }}</div>
                        <div class="name-en">{{ itemInfo.countryNameEn }}</div>
                      </div>
                    </div>
                  </div>
                </TabPane>
              </Tabs>
            </div>
            <div class="select-input" :class="{ 'has-value': form.country }">
              <img v-if="currentCountryLogo" class="selected-flag" :src="currentCountryLogo" alt="">
              <span class="selected-text">{{ form.country ? currentCountry : $t('estimation.selectCountry') }}</span>
              <Icon :class="countryVisible ? 'rotate' : ''" type="ios-arrow-down" />
            </div>
          </Poptip>
        </div>

        <div class="form-group product-types">
          <label class="form-label">{{ $t('estimation.productTypes') }}</label>
          <Poptip width="500" v-model="visible" trigger="click">
            <div slot="content" class="type-selector">
              <div class="type-categories">
                <div v-for="item in categoryList" :key="item.code" @click="onSelectMenu(item)"
                  :class="{ active: item.code == currentMenuId }">
                  {{ item.title }}
                </div>
              </div>
              <div class="type-subcategories">
                <div v-for="item in currentChildMenu" :key="item.key" @click="onSelectChildMenu(item)"
                  :class="{ active: item.active }">
                  {{ item.title }}
                </div>
              </div>
            </div>
            <div class="select-input" :class="{ 'has-value': currentCategoryList.length > 0 }">
              <span v-if="currentCategoryList.length > 0" class="selected-types">
                <span v-for="item in currentCategoryList" :key="item.code" class="type-tag">
                  {{ item.title }}
                </span>
              </span>
              <span v-else>{{ $t('estimation.selectProductType') }}</span>
              <div class="select-actions">
                <span v-if="currentCategoryList.length > 0" class="type-count">+{{ currentCategoryList.length }}</span>
                <Icon v-if="currentCategoryList.length > 0" @click.stop="removeCategory" type="md-close-circle" />
                <Icon :class="visible ? 'rotate' : ''" type="ios-arrow-down" />
              </div>
            </div>
          </Poptip>
        </div>

        <div class="form-group weight-input">
          <label class="form-label required">{{ $t('estimation.weight') }}（g）</label>
          <InputNumber v-model="form.weight" :placeholder="$t('estimation.enterWeight')" class="number-input">
          </InputNumber>
        </div>

        <div class="form-group">
          <label class="form-label required">Product Types (cm):</label>
          <div class="dimensions">
            <div class="dimension-input">
              <Input v-model="form['length']" class="dimension-field"
                :placeholder="$t('estimation.length') + '(cm)'"></Input>
            </div>
            <span class="line">*</span>
            <div class="dimension-input">
              <Input v-model="form.width" class="dimension-field"
                :placeholder="$t('estimation.width') + '(cm)'"></Input>
            </div>
            <span class="line">*</span>
            <div class="dimension-input">
              <Input v-model="form.high" class="dimension-field"
                :placeholder="$t('estimation.height') + '(cm)'"></Input>
            </div>
          </div>
        </div>
      </div>

      <Button class="estimate-btn" :loading="loading" @click="onEstimateInternational">
        {{ $t('estimation.check') }}
      </Button>

      <Divider><img src="@/assets/images/icons/icon_aircraft.png" style="width:24px; height:24px;" /></Divider>

      <div class="form-note">{{ $t('estimation.hint') }}</div>
    </div>

    <div v-if="estimateList.length > 0" class="results-section">
      <div class="results-header">
        <div class="title">All Logistics</div>
        <div class="sort-options">
          <div class="options-item">
            <t-sort v-model="priceValue" @on-change="priceSort" :labelActiveColor="'#2F333A'" :labelSize="14"
              :label="$t('estimation.priceSort')"></t-sort>
          </div>
          <div class="options-item">
            <t-sort v-model="deliverValue" @on-change="deliverSort" :labelSize="14"
              :label="$t('estimation.deliverySort')"></t-sort>
          </div>
        </div>
      </div>

      <div class="shipping-options">
        <div v-for="(item, index) in estimateList" :key="index" class="shipping-option"
          :class="{ unavailable: item.isCarriable == false }">
          <div class="option-header">
            <div class="carrier-info">
              <img v-if="item.recmd == 'Y'" src="@/assets/images/public/corner_mark.png" class="recommended-badge"
                alt="">
              <img class="carrier-logo" :src="item.brandLogoUrl" alt="">
              <div class="carrier-details">
                <h3 class="carrier-name">{{ item.name }}</h3>
                <div v-if="item.recmd == 'Y'" class="recommendation">
                  <span class="recommend-reason">{{ item.recmdReason }}</span>
                </div>
              </div>
            </div>
          </div>

          <div class="option-details">
            <div class="detail-column cost">
              <div class="detail-label">{{ $t('estimation.transportationCosts') }}（{{ userCurrency.code }}）</div>
              <div class="cost-value">{{ item.isCarriable ? Number(item.estTotalExpressCost) : '--' }}</div>
              <Tooltip placement="top" max-width="500">
                <div slot="content" class="cost-breakdown">
                  <div>{{ $t('estimation.estimatedCharges') }}: {{ userCurrency.code }}{{
                    Number(item.estCargoExpressCost) }}</div>
                  <div>{{ $t('estimation.estimatedOverLimitCharges') }}: {{ userCurrency.code }}{{
                    Number(item.estSurcharge) }}</div>
                </div>
                <Icon type="ios-information-circle-outline" class="info-icon" />
              </Tooltip>
              <div class="cost-note">{{ item.tips }}</div>
              <div v-if="item.weightRuleDesc" class="weight-info">
                <Tooltip transfer placement="top" max-width="500">
                  <div slot="content">{{ item.weightRuleDesc }}</div>
                  <Icon type="ios-information-circle-outline" class="info-icon" />
                </Tooltip>
              </div>
              <div class="feature-tags">
                <span v-if="item.insure && item.insure == 'Y'" class="feature-tag">
                  <Icon type="ios-checkmark-circle" /> {{ $t('submitParcel.insuranceAvailable') }}
                </span>
                <span v-if="item.tariffText && item.tariffText != 'untype' && item.tariffText != '无类型'"
                  class="feature-tag">
                  <Icon type="ios-checkmark-circle" /> {{ item.tariffText }}
                </span>
                <span v-if="item.triangle && item.triangle == 'Y'" class="feature-tag">
                  <Icon type="ios-checkmark-circle" /> {{ $t('public.triangleShippingLine') }}
                </span>
              </div>
            </div>

            <div class="detail-column delivery">
              <div class="detail-label">{{ $t('estimation.shippingTime', {
                day: item.deliveredTimeUnit == 'workday' ?
                  $t('estimation.workday') : $t('estimation.workday')
              }) }}</div>
              <div class="delivery-time">{{ item.minDeliveredDays }}d-{{ item.maxDeliveredDays }}d</div>
              <Tooltip v-if="item.minDeliveredDays" transfer placement="top" max-width="500">
                <div slot="content">{{ $t('estimation.timeExplanation') }}</div>
                <Icon type="ios-information-circle-outline" class="info-icon" />
              </Tooltip>
            </div>

            <div class="detail-column description">
              <div class="service-description">{{ item.description }}</div>
            </div>
          </div>

          <div v-if="item.isCarriable == false" class="unavailable-reason">
            {{ item.rejectReason }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TSort from "@/components/t-sort";
import ParcelInfo from "@/views/main/estimation/parcel-info";
import { categoryList, countryList, estimateInternational } from "@/api/logistics";
import { mapState } from "vuex";
export default {
  components: { ParcelInfo, TSort },
  data() {
    return {
      currentCountryLogo: '',
      currentCountry: '', // 当前选择的国家/地区
      countryVisible: false,
      visible: false,
      priceValue: '',
      deliverValue: '',
      loading: false,
      currentMenuId: '', // 当前选择的菜单
      appName: process.env.VUE_APP_NAME,

      originalEstimateList: [], // 原始运输列表
      form: {
        categoryList: [], //  货物列表
        country: '', // 目的地国家
        high: '', // 货物尺寸-高，单位：厘米-cm
        length: '', // 货物尺寸-长，单位：厘米-cm
        weight: 0, // 货物重量，单位：克-g
        width: '' // 货物尺寸-宽，单位：厘米-cm
      },
      originalCategoryList: [], // 原始类型列表
      currentCategoryList: [], // 当前选择的类型
      countryInfo: '',  // 国家列表
      currentChildMenu: [], // 当前子菜单
      categoryList: [], // 类型列表
      estimateList: [], //  经过排序后运输列表
    }
  },
  computed: {
    ...mapState({
      userLanguage: (state) => state.user.userLanguage,
      userCurrency: state => state.user.userCurrency,
      countryList: (state) => {
        let list = [];
        // 国家列表
        if (state.config.config) {
          list = state.config.config.countryList;
        }
        return list;
      }
    })
  },
  created() {
    this.getCountryList();
    this.getCategoryList();
  },
  methods: {
    formattedCost(item) {
      if (item.isCarriable) {
        const result = Number(item.estTotalExpressCost) * 0.7;
        return result.toFixed(2);
      } else {
        return '--';
      }
    },
    cheapFee(item) {
      if (item.isCarriable) {
        const result = Number(item.estCargoExpressCost) - Number(this.formattedCost(item));
        return result.toFixed(2);
      } else {
        return '--';
      }
    },
    onSelectCountry(info) {
      // 选择国家
      this.currentCountryLogo = info.flagUrl;
      this.countryVisible = false;
      this.currentCountry = `${info.countryNameCn}-${info.countryNameEn}`;
      this.form.country = info.countryCode;
    },
    removeCategory() {
      this.currentChildMenu = [];
      this.currentCategoryList = [];
      this.currentMenuId = '';
      this.form.categoryList = [];
      this.categoryList = [];
      this.categoryList = JSON.parse(JSON.stringify(this.originalCategoryList));
    },
    onSelectMenu(info) {
      // 选择的当前子菜单
      if (this.currentMenuId != '') {
        for (let j = 0; j < this.categoryList.length; j++) {
          if (this.categoryList[j].code == this.currentMenuId) {
            this.categoryList[j].children = this.currentChildMenu;
          }
        }
      }
      this.currentMenuId = info.code;
      let list = info.children;
      for (let i = 0; i < list.length; i++) {
        if (list[i].active == true) {
          list[i].active = true;
        } else {
          list[i].active = false;
        }
      }
      this.currentChildMenu = list;
    },
    onSelectChildMenu(info) {
      // 选择的菜单
      for (let i = 0; i < this.currentChildMenu.length; i++) {
        if (this.currentChildMenu[i].code === info.code) {
          // 直接更新属性，不需要使用 this.$nextTick
          this.currentChildMenu.splice(i, 1, { ...this.currentChildMenu[i], active: !this.currentChildMenu[i].active });
        }
      }

      let arr = this.form.categoryList.filter((item) => {
        return item == info.code;
      });
      if (arr.length > 0) {
        this.form.categoryList = this.form.categoryList.filter((item) => {
          return item != info.code;
        });
        this.currentCategoryList = this.currentCategoryList.filter((item) => {
          return item.code != info.code;
        });
      } else {
        this.form.categoryList.push(info.code);
        this.currentCategoryList.push(info);
      }
    },

    getCategoryList() {
      // 运费估算-运输商品类别
      categoryList().then((res) => {
        this.categoryList = JSON.parse(JSON.stringify(res.result));
        this.originalCategoryList = JSON.parse(JSON.stringify(res.result));
      })
    },
    getCountryList() {
      // 获取国家
      countryList().then((res) => {
        this.countryInfo = res.result;
      })
    },
    priceSort(name) {
      if (name == '') {
        name = 'asc';
        this.estimateList = this.originalEstimateList;
      }
      if (name == 'asc') {
        this.estimateList = this.originalEstimateList.sort((a, b) => {
          return a.estTotalExpressCost - b.estTotalExpressCost;
        })
      }
      if (name == 'desc') {
        this.estimateList = this.originalEstimateList.sort((a, b) => {
          return b.estTotalExpressCost - a.estTotalExpressCost;
        })
      }
    },
    deliverSort(name) {
      if (name == '') {
        name = 'asc';
        this.estimateList = this.originalEstimateList;
      }
      if (name == 'asc') {
        this.estimateList = this.originalEstimateList.sort((a, b) => {
          return a.maxDeliveredDays - b.maxDeliveredDays;
        })
      }
      if (name == 'desc') {
        this.estimateList = this.originalEstimateList.sort((a, b) => {
          return b.maxDeliveredDays - a.maxDeliveredDays;
        })
      }
    },
    onEstimateInternational() {
      // 查询运费
      if (this.form.country == '') {
        this.$Message.error(this.$t('estimation.selectCountry'));
        return false;
      }

      if (this.form.weight == '') {
        this.$Message.error(this.$t('estimation.enterWeight'));
        return false;
      }
      this.loading = true;
      estimateInternational(this.form).then((res) => {
        this.loading = false;
        if (res.result.length == 0) {
          this.$Modal.warning({
            title: this.$t('estimation.warmReminder'),
            content: this.$t('estimation.noSuitableLogistics')
          });
        }
        //- 尺寸限制改在前端判断 Ts
        res.result.forEach((item) => {
          if (item.isCarriable && item.sizeLimitExp != null && item.sizeLimitExp != "") {
            let L = this.form.length * 1, W = this.form.width * 1, H = this.form.high * 1;
            let [L1, L2, L3] = [L, W, H].sort().reverse();
            item.isCarriable = eval(item.sizeLimitExp);
            if (!item.isCarriable) {
              item.rejectReason = 'The package exceeds the size limit on this route.';
            }
            // console.log(item.sizeLimitExp);
          }
        })
        //--
        this.originalEstimateList = res.result;
        const list = JSON.parse(JSON.stringify(res.result));
        const sortFn = (a, b) => {
          const indexA = res.result.findIndex(item => item === a);
          const indexB = res.result.findIndex(item => item === b);
          // 先判断recmd属性，将recmd为'Y'的排在前面，且保持原顺序（先进先出）
          if (a.recmd === 'Y' && b.recmd === 'Y') {
            return indexA - indexB;
          } else if (a.recmd !== 'Y' && b.recmd === 'Y') {
            return 1;
          }
          // 如果recmd属性相同，再按照之前的规则进行比较
          if (a.isCarriable !== b.isCarriable) return a.isCarriable ? -1 : 1
          else return a.estTotalExpressCost - b.estTotalExpressCost;
        }
        list.sort(sortFn)
        this.estimateList = list;
      }).catch(() => {
        this.loading = false;
      })
    }
  }
}
</script>

<style scoped lang="less">
.estimation-container {
  width: 1200px;
  margin: 0 auto;
  padding: 60px 0 20px;
  font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
  color: #333;

  .header-banner {
    margin-bottom: 30px;

    .banner-img {
      width: 100%;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }
  }

  .form-title {
    text-align: center;
    margin-bottom: 60px;

    .icon {
      display: inline-block;
      width: 80px;
      height: 80px;
      margin-bottom: 12px;

      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }

    .text {
      font-weight: 600;
      font-size: 24px;
      color: #2F333A;
    }
  }

  .form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 20px;

    .form-group {
      margin-bottom: 15px;

      /deep/ .ivu-poptip {
        display: block;
      }

      /deep/ .ivu-poptip-rel {
        display: block;
      }

      .select-input {
        width: 100%;
      }

      .dimensions {
        display: flex;
        gap: 15px;
        height: 50px;
        border-radius: 3px;
        border: 1px solid #d9d9d9;
        box-sizing: content-box;

        .dimension-input {
          text-align: center;
        }

        .line {
          display: flex;
          width: 12px;
          justify-content: center;
          align-items: center;
          height: 50px;
        }
      }

      .form-label {
        display: block;
        margin-bottom: 8px;
        font-size: 14px;
        color: #555;

        &.required:before {
          content: '* ';
          color: #ff4d4f;
          margin-left: 4px;
        }
      }

      .select-input {
        display: flex;
        align-items: center;
        padding: 10px 15px;
        border: 1px solid #d9d9d9;
        border-radius: 4px;
        background: #fff;
        cursor: pointer;
        transition: all 0.3s;
        width: 100%;
        justify-content: space-between;
        height: 50px;

        &:hover {
          border-color: #40a9ff;
        }

        &.has-value {
          border-color: #40a9ff;
          box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
        }

        .selected-flag {
          width: 20px;
          height: 15px;
          margin-right: 8px;
          object-fit: cover;
        }

        .selected-text {
          flex: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .selected-types {
          display: flex;
          flex-wrap: wrap;
          gap: 5px;
        }

        .type-tag {
          background: #f0f5ff;
          color: #1a73e8;
          padding: 2px 8px;
          border-radius: 4px;
          font-size: 12px;
        }

        .select-actions {
          display: flex;
          align-items: center;
          margin-left: 8px;

          .type-count {
            background: #f5f5f5;
            padding: 0 6px;
            border-radius: 10px;
            font-size: 12px;
            margin-right: 8px;
          }

          .ivu-icon {
            color: #999;
            margin-left: 8px;
            transition: transform 0.2s;

            &.rotate {
              transform: rotate(180deg);
            }
          }
        }
      }

      .number-input {
        height: 50px;

        /deep/ .ivu-input-number-input-wrap {
          height: 50px;
        }

        /deep/ .ivu-input-number-handler {
          height: 24px;
        }

        /deep/ .ivu-input-number-handler-down-inner {
          top: 50%;
          margin-top: -6px;
        }

        /deep/ .ivu-input-number-handler-up-inner {
          top: 50%;
          margin-top: -6px;
        }
      }

      .number-input,
      .dimension-field {
        width: 100%;

        :deep(.ivu-input-number-input),
        :deep(.ivu-input) {
          height: 50px;
        }
      }

      .dimension-field {
        width: 100%;

        :deep(.ivu-input-number-input),
        :deep(.ivu-input) {
          text-align: center;
          border: 0;
        }
      }
    }
  }

  .estimate-btn {
    display: block;
    margin: 20px auto 80px;
    font-size: 18px;
    border-radius: 6px;
    background: #FF186B;
    border-radius: 6px;
    transition: all 0.3s;
    height: 50px;
    width: 400px;
    color: #fff;

  }

  .form-note {
    padding: 12px;
    border-radius: 4px;
    color: #666;
    font-size: 14px;
    text-align: center;
    margin-top: 10px;
  }

  .country-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px 10px;
    padding: 20px 0;
    max-height: 225px;
    overflow-y: auto;
    align-self: start;

    .country-option {
      display: flex;
      align-items: flex-start;
      padding: 0;
      cursor: pointer;
      transition: all 0.2s;
      overflow: hidden;

      &:hover {
        color: #FF186B;
      }

      .country-flag {
        width: 20px;
        height: 18px;
        margin-right: 8px;
        object-fit: cover;
      }

      .country-names {
        flex: 1;
        overflow: hidden;

        .name-cn {
          font-size: 12px;
          color: #969696;
        }

        .name-en {
          font-size: 11px;
          color: #969696;
          overflow-wrap: break-word;
          word-break: break-all;
        }

        &:hover {

          .name-cn,
          .name-en {
            color: #FF186B;
          }
        }
      }
    }
  }

  .type-selector {
    display: flex;
    height: 300px;

    .type-categories {
      width: 200px;
      border-right: 1px solid #f0f0f0;
      overflow-y: auto;

      div {
        padding: 10px;
        cursor: pointer;
        transition: all 0.2s;

        &:hover,
        &.active {
          color: #FF186B;
          background: #f0f5ff;
        }
      }
    }

    .type-subcategories {
      flex: 1;
      padding: 10px;
      overflow-y: auto;
      // display: grid;
      // grid-template-columns: repeat(2, 1fr);
      gap: 8px;

      div {
        padding: 8px;
        border-radius: 4px;
        cursor: pointer;
        transition: all 0.2s;
        font-size: 13px;
        height: 40px;

        &:hover,
        &.active {
          color: #FF186B;
          background: #f0f5ff;
        }
      }
    }
  }

  .results-section {
    margin-top: 40px;

    .results-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      height: 40px;

      .title {
        font-size: 20px;
        font-weight: 600;
        color: #333;
      }

      .sort-options {
        display: flex;
        gap: 15px;

        .options-item {
          border-radius: 8px;
          border: 1px solid #F1F1F1;
          height: 40px;
          padding: 0 10px;
          display: flex;
          align-items: center;
        }
      }
    }

    .sort-options {
      display: flex;
      gap: 20px;
      border-bottom: 1px solid #f0f0f0;
    }

    .shipping-options {
      .shipping-option {
        padding: 20px;
        margin-bottom: 20px;
        border-radius: 8px;
        background: #fff;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        position: relative;
        transition: all 0.3s;

        &.unavailable {
          opacity: 0.6;
        }

        .recommended-badge {
          position: absolute;
          top: 0;
          left: 0;
          width: 80px;
        }

        .option-header {
          margin-bottom: 15px;

          .carrier-info {
            display: flex;
            align-items: center;

            .carrier-logo {
              width: 50px;
              height: 50px;
              border-radius: 50%;
              margin-right: 15px;
              object-fit: cover;
            }

            .carrier-details {
              .carrier-name {
                margin: 0;
                font-size: 18px;
                font-weight: 500;
              }

              .recommendation {
                margin-top: 5px;
                display: flex;
                align-items: center;
                font-size: 14px;
                color: #ff4d4f;

                .recommend-reason {
                  background: #fff2f0;
                  padding: 2px 8px;
                  border-radius: 4px;
                }
              }
            }
          }
        }

        .option-details {
          display: grid;
          grid-template-columns: 3fr 2fr 5fr;
          gap: 20px;

          .detail-column {
            .detail-label {
              font-size: 14px;
              color: #888;
              margin-bottom: 8px;
            }

            &.cost {
              .cost-value {
                font-size: 24px;
                font-weight: 600;
                color: #ff4d4f;
                margin-bottom: 5px;
              }

              .info-icon {
                color: #1890ff;
                margin-left: 5px;
                cursor: pointer;
              }

              .cost-note {
                font-size: 13px;
                color: #666;
                margin: 5px 0;
              }

              .feature-tags {
                display: flex;
                flex-wrap: wrap;
                gap: 8px;
                margin-top: 10px;

                .feature-tag {
                  font-size: 12px;
                  background: #f6f6f6;
                  padding: 2px 8px;
                  border-radius: 4px;
                  display: inline-flex;
                  align-items: center;

                  .ivu-icon {
                    margin-right: 3px;
                    color: #52c41a;
                  }
                }
              }
            }

            &.delivery {
              .delivery-time {
                font-size: 20px;
                font-weight: 500;
                color: #333;
              }
            }

            &.description {
              .service-description {
                font-size: 14px;
                color: #666;
                line-height: 1.6;
              }
            }
          }
        }

        .unavailable-reason {
          margin-top: 15px;
          padding: 10px;
          background: #fff2f0;
          border-radius: 4px;
          color: #ff4d4f;
          font-size: 14px;
        }
      }
    }
  }

  .cost-breakdown {
    div {
      margin: 5px 0;
    }
  }

  .country-tab {
    /deep/ .ivu-tabs-tab {
      margin-right: 0;
      font-size: 14px;
    }
  }
}
</style>